export class AnNiu extends HTMLElement {
	wenBen = null

	constructor() {
		super()

		let shadow = this.attachShadow({ mode: 'closed' })

		let chaCao = document.createElement('slot')
		shadow.appendChild(chaCao)
		
		this.wenBen = document.createElement('span')
		let wb = this.getAttribute('wen-ben')
		if (wb) this.wenBen.textContent = wb
		shadow.appendChild(this.wenBen)
	}

	connectedCallback() {
		this.style = `
			${this.style.cssText}
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 16px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.2);
			box-shadow: 0px 0px 10px 5px rgba(63, 127, 255, 0.2);
			text-shadow: 3px 3px 2px rgba(100, 100, 200, 0.2);
		`
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name == 'wen-ben') this.wenBen.textContent = newValue
	}

	static get observedAttributes() {
		return ['wen-ben'];
	}
}

customElements.define("an-niu", AnNiu)


